<template>
  <VeeForm ref="target" class="form" :validation-schema="mySchema" autocomplete="off" v-slot="{errors}">
    <Field name="account" type="text" v-model="form.account" placeholder="请输入用户名"></Field>
    <div class="error" v-if="errors.account">
        <i class="iconfont icon-warning">{{errors.account }}</i>
    </div>
    
    <Field name="password" type="password"  v-model="form.password" placeholder="请输入密码"></Field>
    <div class="error" v-if="errors.password">
        <i class="iconfont icon-warning">{{errors.password }}</i>
    </div>
    
    <button  @click="validate">Submit</button>
  </VeeForm>
</template>

<script>
import { ref,reactive } from 'vue';
import { Form as VeeForm, Field } from 'vee-validate';
import * as schema from "@/utils/vee-validate-schema";
export default {
  name: 'TestPage',
  components: {
    VeeForm,
    Field,
  },
  setup() {
    const form = reactive({
      isAgree: true,
      password: null,
      account: null
    })
    const mySchema = {
      // 对应表单项属性的校验函数
      account: schema.account,
      password: schema.password
    }
    const login = async ()=>{
      const valid = await target.value.validate()
      console.log(valid)
    }
    const target = ref(null); //在form上绑定  ref="target"
    async function validate () {
      // valid 返回true（通过校验）/false
      console.log(target)
      const valid = await target.value.validate()
      console.log(valid)
    }
    return { form, mySchema,validate }
  },
};
</script>
